<template>
  <view class="row_radio">
    <m-radio-group inline v-model="innerValue" @change="handleChangeType">
      <m-radio-button :label="1" key="1" v-if="innerValue === 1">
        <u-image width="60rpx" height="60rpx" src="@/static/jcz1.png" v-if="innerValue === 1" />
        <u-image width="60rpx" height="60rpx" src="@/static/jcz.png" v-else />
        <text>检测站</text>
      </m-radio-button>
      <m-radio-button :label="2" @click.stop="handleChangeType" key="2" v-else-if="innerValue === 2">
        <u-image width="60rpx" height="60rpx" src="@/static/mt2.png" v-if="innerValue === 2" />
        <u-image width="60rpx" height="60rpx" src="@/static/mt.png" v-else />
        <text>码头</text>
      </m-radio-button>
      <m-radio-button
        :label="3"
        style="margin-right: 0"
        @click.stop="handleChangeType"
        key="3"
        v-else-if="innerValue === 3"
      >
        <u-image width="60rpx" height="60rpx" src="@/static/lk3.png" v-if="innerValue === 3" />
        <u-image width="60rpx" height="60rpx" src="@/static/lk.png" v-else />
        <text>库位</text>
      </m-radio-button>
    </m-radio-group>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      innerValue: this.value,
    }
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val
      },
      immediate: true,
    },
  },
  methods: {
    handleChangeType() {
      this.$emit('input', this.innerValue)
      this.$emit('change', this.innerValue)
    },
  },
}
</script>

<style lang="scss" scoped>
.row_radio {
  margin-bottom: 10rpx;
  .radio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    background: #fff;
    border-color: #d7dce0;
    color: #748da7;
    &--checked {
      border-color: #248dfa;
      color: #248dfa;
    }
    text {
      margin-top: 19rpx;
      font-size: 28rpx;
    }
  }
}
</style>
